<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.blockUI.js" ></script>


</HEAD>
<script type="text/javascript" >
function test(){}
$(document).ready(function(){
	$('#demo1').click(function() { 
		$.blockUI({ message: $('#loginForm') }); 
		$("#result").html("");
		$("#login").click(function(){
			content = $("input").serialize();
			$.blockUI({ message: "progress please waitting..." }); 
			$.ajax({
				type: "post",
				url: "login.php",
				data: content,
				success: function(msg){
					if(msg=="success"){ 
						$.unblockUI(); 
					} 
					else{
						$.blockUI({ message: $('#loginForm') }); 
						$("#result").html("<center>username or password failure.</center>");
						
					}
				}
			
			});
		
		});
		$("#cancel").click(function(){
			$.unblockUI();
		});		

	});     
});
</script>


<BODY>

<input type="button" value="login" id="demo1" />

<div  id="loginForm"style="text-align:center;display:none">

<table border="0" style="margin:0 auto;font:12px" >
  <tr>
    <td><label>username</label>
      :</td>
    <td><input name="username" type="text" size="20"></td>
  </tr>
  <tr>
    <td><label>password</label>
      :</td>
    <td><input name="password" type="text" size="20"></td>  
  </tr>
	
  <tr align="right">
    <td colspan="2"><input type="submit" id="login" value="login">&nbsp;<input type="button" id="cancel" value="cancel"></td>
  </tr>
 <div id="result"></div>
</table>

</div>


</BODY>
</HTML>
